<template>
  <div class="title w wow animate__fadeInUp  " data-wow-duration="2s">
    <h2>{{data.title}}</h2>
    <p>
     {{data.text}}
    </p>
  </div>
</template>

<script>
export default {
  props:['data'],
  mounted(){
    //入场动画
    this.$nextTick(()=>{
      this.$wow.init()
    })
  }
};
</script>

<style scoped lang="less">
.title {
  margin-top: 50px;
  text-align: center;
  margin-bottom: 30px;
  h2 {
    font-size: 32px;
    font-weight: bold;
    position: relative;
    margin-bottom: 30px;
    color: #2f4d5a;
    z-index: 1;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 122px;
      height: 66px;
      z-index: -1;
      background-image: url(./images/section-title-bg.png);
    }
  }
}
</style>